<template>
  <view class="category">
    <!-- 分类切换按钮 -->
    <view class="category-toggle">
      <view class="toggle-btn" :class="{ 'active': showCategory }" @tap="toggleCategory">
        <text>{{ showCategory ? '关闭分类' : '打开分类' }}</text>
        <text class="arrow-down" :class="{ 'rotate': !showCategory }">▼</text>
      </view>
      <view class="filter-btn active">全部</view>
    </view>

    <!-- 左侧分类列表 -->
    <scroll-view scroll-y class="category-list" :class="{ 'hide': !showCategory }">
      <view class="category-item" 
            :class="{ 'active': currentCategory === -1 }"
            @click="selectCategory(-1)"
            hover-class="item-hover">
        全部
      </view>
      <view class="category-item" 
            v-for="(item, index) in categories" 
            :key="index"
            :class="{ 'active': currentCategory === index }"
            @click="selectCategory(index)"
            hover-class="item-hover">
        {{item.categoryName}}
      </view>
    </scroll-view>

    <!-- 商品展示区 -->
    <scroll-view scroll-y class="product-container" :class="{ 'full-width': !showCategory }">
      <view class="product-grid" :class="{ 'single-column': isSuitCategory }">
        <view class="product-item" 
              v-for="(item, index) in products" 
              :key="index"
              @tap="viewDetail(item)"
              :class="{ 'suit-item': isSuitCategory }">
          <image :src="`http://localhost:8080/download/${item.images?item.images.split(',')[0]:''}`" 
                 mode="aspectFill" 
                 class="product-image">
          </image>
          <view class="product-info">
            <text class="product-name">{{item.title}}</text>
            <text class="product-desc" v-if="isSuitCategory">{{item.description}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style scoped>
.category {
  min-height: 100vh;
  background: #000;
  position: relative;
  padding-top: var(--status-bar-height);
}

.category-toggle {
  display: flex;
  padding: 24rpx 30rpx;
  gap: 20rpx;
  border-bottom: 1rpx solid rgba(255,255,255,0.05);
}

.toggle-btn {
  display: flex;
  align-items: center;
  padding: 12rpx 24rpx;
  border-radius: 32rpx;
  background: #222;
  color: #fff;
  font-size: 26rpx;
  transition: all 0.3s ease;
}

.toggle-btn.active {
  background: #333;
}

.arrow-down {
  margin-left: 10rpx;
  font-size: 24rpx;
  transition: all 0.3s ease;
}

.arrow-down.rotate {
  transform: rotate(180deg);
}

.filter-btn {
  padding: 12rpx 32rpx;
  border-radius: 32rpx;
  font-size: 26rpx;
  transition: all 0.3s ease;
}

.filter-btn.active {
  background: #ff4b8b;
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(255,75,139,0.3);
}

.category-list {
  position: absolute;
  left: 0;
  top: calc(var(--status-bar-height) + 88rpx);
  bottom: 0;
  width: 180rpx;
  background: #111;
  transition: all 0.3s ease;
  border-right: 1rpx solid rgba(255,255,255,0.05);
}

.category-list.hide {
  transform: translateX(-100%);
}

.category-item {
  padding: 32rpx 20rpx;
  text-align: center;
  color: rgba(255,255,255,0.6);
  font-size: 26rpx;
  position: relative;
  transition: all 0.3s ease;
  z-index: 1;
}

.category-item:active {
  background: rgba(255,75,139,0.1);
}

.category-item.active {
  color: #ffffff;
  background: rgba(255,75,139,0.15);
}

.category-item.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4rpx;
  height: 32rpx;
  background: #ff4b8b;
  border-radius: 0 4rpx 4rpx 0;
}

.item-hover {
  background-color: rgba(255,75,139,0.1);
}

.product-container {
  height: calc(100vh - var(--status-bar-height) - 88rpx);
  transition: all 0.3s ease;
}

.product-grid {
  margin-left: 180rpx;
  padding: 24rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
  transition: all 0.3s ease;
}

.single-column {
  grid-template-columns: 1fr !important;
  padding: 30rpx;
}

.suit-item {
  margin-bottom: 40rpx !important;
  background: #111 !important;
  border-radius: 20rpx !important;
  overflow: hidden;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.2) !important;
}

.suit-item .product-image {
  width: 100% !important;
  height: 800rpx !important;
  transition: all 0.3s ease;
}

.suit-item .product-info {
  padding: 30rpx !important;
  background: linear-gradient(to top, #111, rgba(17,17,17,0.9));
}

.suit-item .product-name {
  font-size: 32rpx !important;
  color: #fff;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.suit-item .product-desc {
  font-size: 26rpx;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  margin-top: 10rpx;
}

.product-desc {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
  line-height: 1.5;
}

.full-width .product-grid {
  margin-left: 0;
}

.product-item {
  background: #111;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.product-item:active {
  transform: scale(0.98);
}

.product-image {
  width: 100%;
  height: 420rpx;
  background: #222;
  transition: all 0.3s ease;
}

.product-info {
  padding: 20rpx;
  background: linear-gradient(to top, #111, rgba(17,17,17,0.9));
}

.product-name {
  display: block;
  color: #fff;
  font-size: 26rpx;
  text-align: center;
  font-weight: 300;
  letter-spacing: 1rpx;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-item {
  animation: fadeIn 0.5s ease;
}
</style>

<script>
import API from '@/api/config.js'

export default {
  data() {
    return {
      showCategory: true,
      currentCategory: -1,
      categories: [],
      products: [],
      allProducts: []
    }
  },
  
  computed: {
    isSuitCategory() {
      if (this.currentCategory === -1) return false;
      const currentCat = this.categories[this.currentCategory];
      return currentCat && (
        currentCat.categoryName === '套装' || 
        currentCat.categoryName.includes('套装') || 
        currentCat.categoryName.includes('套餐')
      );
    }
  },

  onShow() {
    // 检查是否有默认分类
    try {
      const defaultCategory = uni.getStorageSync('defaultCategory');
      if (defaultCategory) {
        console.log('找到默认分类:', defaultCategory);
        // 先加载分类数据
        uni.request({
          url: API.CATEGORY_LIST,
          success: (res) => {
            if (res.data.code === 200) {
              this.categories = res.data.data;
              console.log('加载的分类数据:', this.categories);
              
              // 查找匹配的分类
              const categoryIndex = this.categories.findIndex(cat => {
                console.log('比较:', cat.categoryName, defaultCategory);
                return cat.categoryName === defaultCategory || 
                       cat.categoryName.includes(defaultCategory) ||
                       defaultCategory.includes(cat.categoryName);
              });
              
              if (categoryIndex !== -1) {
                this.selectCategory(categoryIndex);
              }
            }
          }
        });
        uni.removeStorageSync('defaultCategory');
      }
    } catch (error) {
      console.error('读取默认分类失败:', error);
    }

    this.loadCategories();
    this.loadProducts();
  },

  methods: {
    loadCategories() {
      uni.request({
        url: API.CATEGORY_LIST,
        success: (res) => {
          if (res.data.code === 200) {
            this.categories = res.data.data;
          }
        }
      });
    },

    loadProducts() {
      uni.request({
        url: API.GOWN_LIST,
        success: (res) => {
          if (res.data.code === 200) {
            this.products = res.data.data;
            this.allProducts = [...this.products];
          }
        }
      });
    },
    
    selectCategory(categoryId) {
        console.log('选择分类:', categoryId)
        this.currentCategory = categoryId
        
        if (categoryId === -1) {
            // 全部分类显示所有商品
            this.loadProducts()
        } else if (this.isSuitCategory) {
            // 套装分类使用特殊ID -1
            uni.request({
                url: `${API.GOWN_BY_CATEGORY}-1`,
                success: (res) => {
                    if (res.data.code === 200) {
                        this.products = res.data.data
                    }
                }
            })
        } else {
            // 其他分类按正常逻辑筛选
            uni.request({
                url: `${API.GOWN_BY_CATEGORY}${this.categories[categoryId].id}`,
                success: (res) => {
                    if (res.data.code === 200) {
                        this.products = res.data.data
                    }
                }
            })
        }
    },
    
    toggleCategory() {
      this.showCategory = !this.showCategory;
    },
    
    viewDetail(item) {
        // 传递是否为套装的标志
        const isSuit = this.isSuitCategory
        uni.navigateTo({
            url: `/pages/dress-detail/dress-detail?id=${item.id}&isSuit=${isSuit}`
        });
    }
  }
}
</script>
